<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户添加</title>
<%@ include file="/static/base/common.jsp"%>
<script type="text/javascript" src="${ctx}/static/js/hp_form.js"></script>
</head>
<body>
	<div class="body_main">
		<form class="layui-form layui-form-pane" action="${ctx}/user/addUser" method="post" enctype="multipart/form-data">
			<div class="layui-form-item">
				<label class="layui-form-label">昵称</label>
				<div class="layui-input-block">
					<input type="text" name="nickname" autocomplete="off"
						placeholder="请输入昵称" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" name="userName" autocomplete="off"
						placeholder="请输入用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="text" name="password" autocomplete="off"
						placeholder="请输入密码" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-block">
					<input type="tel" name="tel" id="tel" lay-verify="required" autocomplete="off"
						placeholder="请输入电话" class="layui-input" onblur="checkPhone()">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<select name="sex" lay-verify="required">
						<option value=""></option>
						<option value="1">男</option>
						<option value="-1">女</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="email" autocomplete="off"
						placeholder="请输入邮箱" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">头像</label>
				<div class="layui-input-block">
<%--					<input type="file" name="userImg" autocomplete="off" placeholder="请输入头像" class="layui-input">--%>
					<div class="layui-upload" style="float: left ;margin-left: 10px">
						<img class="layui-upload-img" id="img1" width="40px" height="40px"/>
						<p id="text1"/>
					</div>
					<div class="layui-upload" style="float: left ;margin-left: 10px">
						<button type="button" class="layui-btn" id="upLoadImg1">上传图片</button>
					</div>

				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-block">

					<input type="checkbox" name="status" lay-skin="switch"  id="status"
						lay-filter="switchTest" lay-text="可用|禁用" checked="">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
<script type="text/javascript">
	layui.use(['form'],function (){
		var form =layui.form;

		form.on('switch(switchTest)',function (){
			if (this.checked){
				$("#status").removeAttr('checked');
				$("#status").attr('value','off')
			}else {
				$("#status").attr('checked','checked');
				$("#status").attr('value','on')
			}
		})
	})
</script>
<script type="text/javascript">
	layui.use('form',function (){
		var form =layui.form;

	//	通用弹出层表单提交方法
		form.on('submit(demo1)',function (data){
		    if (!checkPhone()){
		        return false;
            }
			$.post($('form').attr("action"),data.field,function (e){
				if (e.result ==true){
					parent.closeLayer(e.msg);
				}else {
					layer.msg('操作失败：'+e.msg,{icon:2,time:2000});
				}
			})
			return false;
		})

	})
    function closeLayer(msg){
        //	重新加载用户表单
        layui.table.reload($('tbale.layui-hide').attr("id"));
        layer.msg(msg,{icon:1,time:1500});
        layer.closeAll('iframe');
    }
	<%--    js校验手机号码--%>
	function checkPhone(){
		let phone = $("#tel").val();
		let regx=/^1[3456789]\d{9}$/;
		if (regx.test(phone)){
			return true;
		}else {
			layer.msg('手机号格式错误',{icon:2,time:2000});
			return false;
		}
	}
</script>
<script type="text/javascript">
	layui.use('upload',function (){
		var	upload =layui.upload;
		var $ =layui.jquery;

		//图片上传
		var uploadImg = upload.render({
			elem:'#upLoadImg1'
			,url:'${ctx}/user/upLoadImg'
			,before :function (obj){
			//	预览本地文件
				obj.preview(function (index,file,result){
					$('#img1').attr('src',result);//图片链接
				});
			}
			,done:function (res){
			//	如果上传失败
				if (res.code >0){
					return layui.msg('上传失败');
				}
			//	上传成功
			}
			,error:function(){
			//	演示失败状态，并实现重传
				var text1 =$('#text1');
				text1.html('<span style="color: #dd4a68;">上传失败</span> <a class="layui-btn layui-btn-xs img-reload">重试</a>');
				text1.find('.img-reload').on('click',function (){
					uploadImg.upload();
				});
			}
		});

	});
</script>
</body>
</html>
